<template>
  <div id='courier-holder'>
    <courier-header></courier-header>
    <div class="courier-container">
      <el-row>
        <el-col :span="2">&nbsp;</el-col>
        <el-col :span="20">

          <div class="order-container">
            <div class="order-header">
              <p style="padding: 10px 50px 10px ;text-align: left;font-weight:bold">
                代购订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; （ 快递员：{{ courier.username }}&nbsp;&nbsp;&nbsp; 邮箱：{{ courier.email }} ）
              </p>
              <hr>
            </div>
            <div class="order-content">
              <div class="order-content">
                <el-table class="order-table" :data="orders.slice(0, 8)" border>
                  <el-table-column prop="shopname" label="商店名称" align="center" header-align="center" width="180">
                    <template slot-scope="scope">
                      <span>{{ scope.row.shopname | shopnameFilter }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createtime" label="下单时间" align="center" header-align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.createtime | timeFilter }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="totalcost" label="订单总价" align="center" header-align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.totalcost }}元</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="deliverycost" label="快递费用" align="center" header-align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.deliverycost }}元</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="订单状态" align="center" header-align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.status | statusFilter }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import { ROUTENAME } from 'services/constConfig.js'
// import { mapGetters, mapActions } from 'vuex'
import CourierHeader from 'components/Header.vue'
import userService from 'services/userService.js'
import orderService from 'services/orderService.js'
import * as notifyUtil from 'utils/notifyUtil.js'

export default {
  components: {
    'courier-header': CourierHeader
  },
  data() {
    return {
      orders: [],
      courier: {
        username: '',
        email: ''
      }
    }
  },
  filters: {
    shopnameFilter(shopname) {
      if (!shopname) {
        return '全家便利店'
      } else {
        return shopname
      }
    },
    statusFilter(status) {
      if (status === 0) {
        return '派单中'
      }
      if (status === 6) {
        return '已接单'
      }
      if (status === 7) {
        return '已支付'
      }
      if (status === 8) {
        return '已完成'
      }
      if (status === 9) {
        return '已取消'
      }
    },
    timeFilter(timestamp) {
      let newDate = new Date(timestamp)
      // return newDate.toLocaleDateString()
      return (
        newDate.toLocaleDateString().replace(/\//g, '-') +
        ' ' +
        newDate.toTimeString().substr(0, 8)
      )
    }
  },
  methods: {
    getOrdersByCourierId() {
      if (this.$route.query) {
        if (this.$route.query.courierId) {
          orderService
            .getOrdersByCourierId(this.$route.query.courierId)
            .then(response => {
              if (
                response.data.Order === null ||
                response.data.Order === undefined
              ) {
                notifyUtil.showError('查找订单失败', '该快递员暂无代购订单')
              } else {
                let orders = response.data.Order.reverse()
                this.$set(this, 'orders', orders)
              }
            })
        }
      }
    },
    getCourierById() {
      if (this.$route.query) {
        if (this.$route.query.courierId) {
          userService
            .getUserById(this.$route.query.courierId)
            .then(response => {
              if (
                response.data.User === null ||
                response.data.User === undefined
              ) {
                notifyUtil.showError('查找用户失败', '服务器错误')
              } else {
                this.$set(
                  this.courier,
                  'username',
                  response.data.User[0].username
                )
                this.$set(this.courier, 'email', response.data.User[0].email)
              }
            })
        }
      }
    }
  },
  mounted() {
    this.getCourierById()
    this.getOrdersByCourierId()
  },
  watch: {}
}
</script>

<style scoped>
#courier-holder {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  background-color: #f7f7f7;
}
.courier-container {
  margin-top: 20px;
  width: 1200px;
  height: 800px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #e4e7ed;
  background-color: #fff;
}
.order-container {
  margin-top: 50px;
  width: 100%;
  /* height: 100%; */
  min-height: 500px;
  float: left;
  /* text-align: left; */
  /* border: 1px solid #DCDFE6; */
  background-color: #ffffff;
}
.order-content {
  margin-top: 50px;
  width: 100%;
  /* height: 800px; */
  margin-left: auto;
  margin-right: auto;
}
.order-holder {
  float: left;
  width: 100%;
  height: 100px;
  /* background-color:blue; */
  padding: 10px;
  margin-top: 5px;
  box-sizing: border-box;
  border: 1px solid #e4e7ed;
  text-align: left;
}
.order-content-header {
  font-size: 15px;
  font-weight: 500;
  color: #606266;
}
.order-content-main {
  text-align: left;
  margin-top: 15px;
  font-size: 12px;
  font-weight: 500;
}
.order-table {
  text-align: left;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.order-table .success-row {
  /* background: #f0f9eb; */
}
</style>
